<template>
  <scroll-view class="w-full h-full" scroll-y>
    <view class="w-[100%] h-[auto]">
      <view
        class="w-[100%] h-[300rpx] overflow-hidden bg-gradient-to-b from-[#66a8ff] to-[#3ea0ff] flex items-center justify-start"
        :style="{ paddingTop: safeTop + 'px' }"
      >
        <view
          class="absolute left-4 top-6 w-8 h-8 flex items-center justify-center"
        >
          <text class="text-2xl text-white">‹</text>
        </view>
        <view class="flex-1 flex items-center justify-center">
          <text class="text-2xl font-bold text-white drop-shadow"
            >我的证书</text
          >
        </view>
      </view>
    </view>

    <view
      class="w-[90%] m-[auto] pb-8 bg-[#fff] mt-[-100rpx] rounded-xl shadow-md px-2 py-4"
    >
      <view
        v-for="item in userCertifList"
        :key="item.id"
        class="mb-6"
        @click="navigateToDetail(item.id)"
      >
        <view class="bg-white rounded-xl p-4 shadow-md flex items-center">
          <image
            src="../../static/certif.png"
            mode="aspectFit"
            class="w-[80rpx] h-[80rpx] rounded-lg mr-4 bg-[#eef6ff]"
          />
          <view class="flex flex-col items-start justify-center">
            <text class="text-lg font-bold text-[#0b1221]">{{
              item.name
            }}</text>
            <text class="text-sm text-[#7b8696] mt-2"
              >颁发机构:{{ item.org }}</text
            >
            <text class="text-sm text-[#7b8696] mt-2"
              >获取时间:{{ dayjs(item.createTime).format('YYYY-MM') }}</text
            >
            <text class="text-sm text-[#7b8696] mt-2"
              >证书编号:{{ generateNO() }}</text
            >
          </view>
        </view>
      </view>

      <view
        class="h-[auto] flex items-center justify-center mt-[100rpx]"
        v-if="certificates.length === 0"
      >
        <view class="flex items-center flex-col">
          <image
            src="../../static/emypt.png"
            mode="widthFix"
            class="w-[200rpx]"
          />
          <text class="text-[#000]">还没有证书哦，快去参与活动获取吧！</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { reactive, computed, onMounted, ref } from 'vue'
import useStore from '@/store'
import { jumpTo } from '@/utils/unifunc'
import { getDonationStatus } from '@/api/user.api'
import dayjs from 'dayjs'

const user = uni.getStorageSync('user')
const { useSafeArea } = useStore()

const userCertifList = ref<any[]>([])

const certificates = reactive<Certificate[]>([
  {
    id: 1,
    title: '志愿证书',
    org: 'HeartNeigbor官方',
    date: '2023-01-01',
    number: '1234567890'
  },
  {
    id: 2,
    title: '帮扶记录',
    org: 'HeartNeigbor官方',
    date: '2023-01-01',
    number: '1234567890'
  }
])

const generateNO = () => {
  // 随机生成编号，8位，每一次调用都不同
  const randomNO = Math.random().toString(36).substring(2, 10).toUpperCase()
  return randomNO
}

const navigateToDetail = (id: number) => {
  jumpTo('/pages/tools/certificateInfo?id=' + id)
}

const safeTop = computed(() => {
  return useSafeArea.getSafeAreaTop + 20
})

// 获取用户捐赠情况
onMounted(async () => {
  try {
    const res = await getDonationStatus({ userId: user.id })
    if (res.code === 200) {
      userCertifList.value = res.data.items
    }
  } catch (error) {
    console.error('获取用户捐赠情况失败:', error)
  }
})
</script>

<style scoped>
.scroll-view {
  height: 100vh;
}
.shadow-md {
  box-shadow: 0 8px 18px rgba(14, 30, 50, 0.08);
}
.drop-shadow {
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.06);
}
</style>
